<template>
  <div style="border: 1px; padding: 5px">
    <!-- 试题录入 -->
    <el-form
      ref="formData"
      :model="formData"
      :rules="rules"
      label-width="100px"
      class="demo-formData"
      style="
        margin: 20px;
        padding: 10px;
        background-color: #fff;
        border-radius: 10px;
      "
    >
      <el-row>
        <el-col :span="24" class="title"> 试题录入 </el-col>
      </el-row>
      <el-divider />
      <el-form-item label="学科" prop="subjectID">
        <el-col :span="10">
          <el-select
            v-model="formData.subjectID"
            style="width: 99%"
            placeholder="请选择学科"
            @change="SubjectsFn"
          >
            <el-option
              v-for="item in SubjectsList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              {{ item.label }}
            </el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="目录" prop="catalogID">
        <el-col :span="10">
          <el-select
            v-model="formData.catalogID"
            style="width: 99%"
            placeholder="请选择目录"
          >
            <div v-if="formData.subjectID">
              <el-option
                v-for="item in DirectoryList"
                :key="item.id"
                :label="item.directoryName"
                :value="item.id"
              />
            </div>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="企业" prop="enterpriseID">
        <el-col :span="10">
          <el-select
            v-model="formData.enterpriseID"
            style="width: 99%"
            placeholder="请选择企业"
          >
            <div v-if="formData.subjectID">
              <el-option
                v-for="item in Companys"
                :key="item.id"
                :label="item.shortName"
                :value="item.id"
              />
            </div>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="城市" required prop="city">
        <el-col :span="10">
          <el-col :span="12">
            <el-select
              v-model="formData.province"
              style="width: 98%"
              placeholder="请选择城市"
              @change="citychange"
            >
              <el-option
                v-for="(item, index) in city"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-col>
          <el-col :span="12">
            <el-select
              v-model="formData.city"
              style="width: 98%"
              placeholder="请选择城市"
            >
              <div v-if="formData.province">
                <el-option
                  v-for="(item, index) in citys"
                  :key="index"
                  :label="item"
                  :value="item"
                />
              </div>
            </el-select>
          </el-col>
        </el-col>
      </el-form-item>
      <el-form-item label="方向" prop="direction">
        <el-col :span="10">
          <el-select
            v-model="formData.direction"
            style="width: 99%"
            placeholder="请选择目录"
          >
            <el-option
              v-for="item in directionlist"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="题型" prop="questionType">
        <el-radio-group v-model="formData.questionType">
          <el-radio label="1">单选</el-radio>
          <el-radio label="2">多选</el-radio>
          <el-radio label="3">简答</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="难度" prop="difficulty">
        <el-radio-group v-model="formData.difficulty">
          <el-radio label="1">简单</el-radio>
          <el-radio label="2">一般</el-radio>
          <el-radio label="3">困难</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 富文本编辑器 -->
      <el-form-item label="题干" prop="question">
        <quill-editor
          v-model="formData.question"
          :options="editorOption"
          style="width: 100%; height: 100px; display: inline-block"
        />
      </el-form-item>
      <div v-if="formData.questionType === '1'">
        <!-- 单选 -->
        <el-form-item label="选项">
          <el-radio-group v-model="radioA">
            <div
              v-for="(item, index) in formData.options"
              :key="index"
              style="position: relative; height: 70px"
            >
              <el-radio v-model="item.isRight" :label="index">
                {{ item.code }}: <el-input v-model="item.title" />
              </el-radio>
              <div class="img">
                <image-upload v-model="formData.options[index].img" />
              </div>
            </div>
          </el-radio-group>
        </el-form-item>
      </div>
      <div v-if="formData.questionType === '2'">
        <!-- 多选 -->
        <el-form-item label="选项">
          <div
            v-for="(item, index) in formData.options"
            :key="index"
            style="position: relative; height: 70px"
          >
            <el-checkbox
              v-model="item.isRight"
              :true-label="1"
              :false-label="0"
            >
              {{ item.code }}: <el-input v-model="item.title" />
              <div class="img">
                <image-upload v-model="formData.options[index].img" />
              </div>
            </el-checkbox>
          </div>
        </el-form-item>
      </div>
      <!-- 添加按钮 -->
      <el-form-item>
        <el-col v-if="formData.questionType === '1'" :span="10">
          <el-button type="danger" disabled @click="addanswer">
            +增加选项与答案
          </el-button>
        </el-col>
        <el-col v-if="formData.questionType === '2'" :span="10">
          <el-button type="danger" @click="addanswer">
            +增加选项与答案
          </el-button>
        </el-col>
      </el-form-item>
      <el-form-item label="解析视频">
        <el-col :span="10">
          <el-input v-model="formData.videoURL" />
        </el-col>
      </el-form-item>
      <el-form-item label="答案解析" prop="answer">
        <quill-editor
          v-model="formData.answer"
          :options="editorOption"
          style="width: 100%; height: 100px; display: inline-block"
        />
      </el-form-item>
      <el-form-item label="题目备注">
        <el-row>
          <el-col :span="10">
            <el-input v-model="formData.remarks" type="textarea" />
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="试题标签">
        <el-row>
          <el-col :span="10">
            <!-- <el-input v-model="formData.tags" type="text" /> -->
            <el-select
              v-model="tags"
              multiple
              filterable
              allow-create
              default-first-option
              placeholder="请选择试题标签"
              style="width: 100%"
            >
              <el-option
                v-for="item in labelArr"
                :key="item.id"
                :label="item.tagName"
                :value="item.tagName"
              />
            </el-select>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item>
        <el-button v-if="id" type="success" @click="addQuestions">
          确认修改
        </el-button>
        <el-button v-else type="primary" @click="addQuestions">
          确认提交
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import {
  getRandomsApi,
  gitCompanysApi,
  addQuestionsApi,
  editQuestionsApi,
  getLabelListsApi
} from '@/api/questionBank'
import { getSubjectsListApi, getDirectoryListApi } from '@/api/subject'
import ImageUpload from './image-upload.vue'
import { provinces } from '@/utils/city'
import { citys } from '@/utils/city'
export default {
  components: {
    quillEditor,
    ImageUpload
  },
  props: {},
  data() {
    return {
      option: null,
      formData: {
        subjectID: '', // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        province: '', // 企业所在地省份
        city: '', // 企业所在城市
        direction: '', // 方向
        questionType: '1', // 试题类型
        difficulty: '1', // 难度
        question: '', // 题干
        // 选项列表
        options: [
          { isRight: false, code: 'A', title: '', img: '' },
          { isRight: false, code: 'B', title: '', img: '' },
          { isRight: false, code: 'C', title: '', img: '' },
          { isRight: false, code: 'D', title: '', img: '' }
        ],
        videoURL: '', // 解析视频
        answer: '', // 答案解析
        remarks: '', // 题目备注
        tags: '' // 试题标签
      },
      tags: [],
      SubjectsList: [], // 学科列表
      DirectoryList: [], // 目录列表
      id: this.$route.query.id, // 学科id
      // 校验
      rules: {
        subjectID: [
          {
            required: true,
            message: '请选择学科',
            trigger: 'blur'
          }
        ],
        catalogID: [
          {
            required: true,
            message: '请选择目录',
            trigger: 'blur'
          }
        ],
        enterpriseID: [
          {
            required: true,
            message: '请选择企业',
            trigger: 'blur'
          }
        ],
        city: [
          {
            required: true,
            message: '请选择城市',
            trigger: 'blur'
          }
        ],
        direction: [
          {
            required: true,
            message: '请选择方向',
            trigger: 'blur'
          }
        ],
        questionType: [
          {
            required: true,
            message: '请选择题型',
            trigger: 'blur'
          }
        ],
        difficulty: [
          {
            required: true,
            message: '请选择难度',
            trigger: 'blur'
          }
        ],
        question: [
          {
            required: true,
            message: '请输入题干',
            trigger: 'blur'
          }
        ],
        answer: [
          {
            required: true,
            message: '请输入答案解析',
            trigger: 'blur'
          }
        ]
      },
      // 富文本框
      editorOption: {
        placeholder: '请输入内容',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['blockquote', 'code-block'],
            ['image', 'link']
          ]
        }
      },
      // 城市
      city: [],
      citys: [],
      radio: 1, // 单选框
      input: '',
      Companys: [], // 企业列表
      // 方向
      directionlist: [
        { name: 'o2o' },
        { name: '外包服务' },
        { name: '企业服务' },
        { name: '互联网金融' },
        { name: '企业咨询' },
        { name: '互联网' },
        { name: '电子商务' },
        { name: '其他' }
      ],
      // 标签列表
      labelArr: [],
      radioA: null // 单选框的group的v-model
    }
  },
  watch: {
    // 监听单选框的v-model
    radioA: {
      handler(newVal) {
        this.formData.options.forEach((item) => (item.isRight = false))
        this.formData.options[newVal].isRight = true
      }
    }
  },
  async created() {
    this.city = provinces()
    if (this.id) {
      const { data } = await getRandomsApi(this.id)
      this.formData = data
      console.log(data)
      this.tags = data.tags.split(',')
      if (this.formData.questionType === '1') {
        this.radioA =
          this.formData.options.findIndex((ele) => ele.isRight === 1) === -1
            ? null
            : this.formData.options.findIndex((ele) => ele.isRight === 1)
      }
      // this.formData.options = this.formData.options.sort((a, b) => {
      //   const asciiA = a.code.charCodeAt(0)
      //   const asciiB = b.code.charCodeAt(0)
      //   return asciiA - asciiB
      // })
      this.SubjectsFn(this.formData.subjectID)
    }
    const Subjects = await getSubjectsListApi()
    this.SubjectsList = Subjects.data
  },
  methods: {
    // 城市
    async citychange(val) {
      this.citys = citys(val)
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          return false
        }
      })
    },
    // 学科选中
    async SubjectsFn(id) {
      // this.formData.subjectID = id
      const { data } = await getDirectoryListApi(id)
      this.DirectoryList = data.items
      const Companys = await gitCompanysApi(id)
      this.Companys = Companys.data.items
      const Label = await getLabelListsApi(id)
      this.labelArr = Label.data.items
    },
    addanswer() {
      this.formData.options.push({
        isRight: false,
        code: String.fromCharCode(this.formData.options.length + 65),
        title: '',
        img: ''
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    // 题库添加 / 编辑
    async addQuestions() {
      if (this.id) {
        this.formData.tags = this.tags.join(',')
        this.$refs.formData.validate(async (valid) => {
          if (valid) {
            await editQuestionsApi(this.formData, this.id)
            this.$router.push('/basic-question-bank')
            this.$message.success('修改成功')
          }
        })
      } else {
        this.$refs.formData.validate(async (valid) => {
          if (valid) {
            this.formData.tags = this.tags.join(',')
            await addQuestionsApi(this.formData)
            this.$router.push('/basic-question-bank')
            this.$message.success('添加成功')
          }
        })
      }
      this.formData = {
        subjectID: '', // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        province: '', // 企业所在地省份
        city: '', // 企业所在城市
        direction: '', // 方向
        questionType: '1', // 试题类型
        difficulty: '1', // 难度
        question: '', // 题干
        // 选项列表
        options: [
          { isRight: false, code: 'A', title: '', img: '' },
          { isRight: false, code: 'B', title: '', img: '' },
          { isRight: false, code: 'C', title: '', img: '' },
          { isRight: false, code: 'D', title: '', img: '' }
        ],
        videoURL: '', // 解析视频
        answer: '', // 答案解析
        remarks: '', // 题目备注
        tags: '' // 试题标签
      }
    }
  }
}
</script>
<style scoped lang="scss">
el-select {
  width: 100%;
  border-radius: 5px;
}
.el-editor__top {
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  margin-bottom: 15px;

  /* 修改工具栏按钮图标颜色 */
  .ql-stroke {
    stroke: #333;
  }
}
.title {
  padding-left: 10px;
  padding-top: 10px;
}
.ql-editor {
  font-size: 14px;
  min-height: 150px;

  /* 修改编辑区域字体颜色和背景颜色 */
  color: #333;
  background-color: #fff;
}
.img {
  width: 100px;
  height: 60px;
  // overflow: hidden;
  display: inline-block;
  position: absolute;
  top: -10px;
  right: -120px;
}
</style>
